import React, { type ReactElement } from 'react'
import { Close, Delete, DocFail, DocSuccess, Download, FullScreenTwo, GoEnd, GoStart, MusicList, MusicOne, OffScreenTwo, Pause, PlayCycle, PlayOnce, PlayOne, ShuffleOne, Theme, VolumeMute, VolumeNotice, VolumeSmall } from '@icon-park/react'
import { type IconProps, type LyricIconProps, type ModeIconProps, type VolumeIconProps } from 'src/interface'
import IconPark from 'src/iconpark'

export function VolumeIcon ({ icons, fill, volume, size = 24 }: VolumeIconProps): ReactElement {
  switch (volume) {
    case 0:
      return icons.minVolumeIcon ?? <VolumeMute theme="outline" size={size} fill={fill} />
    case 1:
      return icons.volumeIcon ?? <VolumeNotice theme="outline" size={size} fill={fill} />
    default:
      return icons.maxVolumeIcon ?? <VolumeSmall size={size} fill={fill} />
  }
}

export function ModeIcon ({ playMode, icons, fill, size = 24 }: ModeIconProps): ReactElement {
  switch (playMode) {
    case 'random':
      return icons.randomIcon ?? <ShuffleOne size={size} fill={fill} />
    case 'order':
      return icons.orderIcon ?? <PlayCycle theme="outline" size={size} fill={fill} />
    default:
      return icons.singleIcon ?? <PlayOnce theme="outline" size={size} fill={fill} />
  }
}

export function LyricIcon ({ show, icons, fill, size = 24 }: LyricIconProps): ReactElement {
  return show ? icons.closeLyricIcon ?? <DocFail theme="outline" size={size} fill={fill} /> : icons.openLyricIcon ?? <DocSuccess theme="outline" size={size} fill={fill} />
}

export function CloseIcon ({ icons, fill, size = 24 }: IconProps): ReactElement {
  return icons.closeIcon ?? <Close size={size} fill={fill} />
}

export function ListIcon ({ icons, fill }: IconProps): ReactElement {
  return icons.audioListIcon ?? <MusicList size="24" fill={fill} />
}

export function DeleteIcon ({ icons, fill }: IconProps): ReactElement {
  return icons.deleteIcon ?? <Delete theme="outline" size="16" fill={fill} />
}

export function PrevIcon ({ icons, fill, size = 34 }: IconProps): ReactElement {
  return icons.prevIcon ?? <GoStart size={size} fill={fill} />
}

export function PauseIcon ({ icons, fill, size = 40 }: IconProps): ReactElement {
  return icons.pauseIcon ?? <Pause size={size} fill={fill} />
}

export function PlayIcon ({ icons, fill, size = 40 }: IconProps): ReactElement {
  return icons.playIcon ?? <PlayOne size={size} fill={fill} />
}

export function NextIcon ({ icons, fill, size = 34 }: IconProps): ReactElement {
  return icons.nextIcon ?? <GoEnd size={size} fill={fill} />
}

export function DownLoadIcon ({ icons, fill, size = 24 }: IconProps): ReactElement {
  return icons.downloadIcon ?? <Download size={size} fill={fill} />
}

export function WavesIcon ({ icons, size = 14 }: IconProps): ReactElement {
  return icons.audioListPlaying ?? <IconPark component={<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
    <rect x="15" y="20" width="10" height="60" >
      <animate attributeName="height" values="10; 60; 10" dur="1s" repeatCount="indefinite" />
      <animate attributeName="y" values="45; 20; 45" dur="1s" repeatCount="indefinite" />
    </rect>
    <rect x="40" y="20" width="10" height="60" >
      <animate attributeName="height" values="10; 60; 10" dur="1s" begin="0.2s" repeatCount="indefinite" />
      <animate attributeName="y" values="45; 20; 45" dur="1s" begin="0.2s" repeatCount="indefinite" />
    </rect>
    <rect x="65" y="20" width="10" height="60" >
      <animate attributeName="height" values="10; 60; 10" dur="1s" begin="0.4s" repeatCount="indefinite" />
      <animate attributeName="y" values="45; 20; 45" dur="1s" begin="0.4s" repeatCount="indefinite" />
    </rect>
  </svg>} theme="outline" size={size} defaultChecked />
}

export function OffScreenIcon ({ icons, fill }: IconProps): ReactElement {
  return icons.offScreenIcon ?? <OffScreenTwo theme="outline" size="24" fill={fill} />
}

export function MusicIcon ({ icons, fill, size = 24 }: IconProps): ReactElement {
  return icons.floatMusicIcon ?? <MusicOne theme="outline" size="24" fill={fill} />
}

export function FullScreenIcon ({ icons, fill, size = 24 }: IconProps): ReactElement {
  return icons.fullScreenIcon ?? <FullScreenTwo theme="outline" size={size} fill={fill} />
}

export function ThemeIcon ({ icons, fill, size = 24 }: IconProps): ReactElement {
  return icons.themeIcon ?? <Theme theme="outline" size={size} fill={fill} />
}
